<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/symbola" type="text/css" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <title>DigitalJS Online</title>
</head>

<body>
  <input type="file" style="display:none" id="input_load" />
  <div class="main-wrapper-grid">
    <div id="toolbar">
      <div class="btn-toolbar" role="toolbar" aria-label="Toolbar">
        <div class="mr-2 upper-toolbar-group digitaljs-logo" title="DigitalJS"></div>
        <div id="synthesize-bar">
          <form>
            <button id="synthesize-btn" title="Synthesize and simulate!" type="submit" class="btn btn-primary">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4"
                stroke-linecap="round" stroke-linejoin="round" class="feather feather-play">
                <polygon points="5 3 19 12 5 21 5 3"></polygon>
              </svg>
              Run
            </button>
          </form>
        </div>
        <div class="symbola btn-group mr-2 upper-toolbar-group" role="group" aria-label="Time control">
          <button name="pause" type="button" class="btn btn-secondary" title="Pause simulation"
            disabled="true">⏸</button>
          <button name="resume" type="button" class="btn btn-secondary" title="Resume simulation"
            disabled="true">▶</button>
          <button name="fastfw" type="button" class="btn btn-secondary" title="Fast-forward simulation"
            disabled="true">⏩</button>
          <button name="single" type="button" class="btn btn-secondary" title="Run single time step"
            disabled="true">→</button>
          <button name="next" type="button" class="btn btn-secondary" title="Run until next event"
            disabled="true">⇥</button>
        </div>
        <div class="input-group mr-2 upper-toolbar-group">
          <div class="input-group-prepend">
            <span class="symbola input-group-text" title="Current tick">⏱</span>
          </div>
          <input type="text" class="form-control" disabled="disabled" id="tick" />
        </div>
        <div class="symbola btn-group mr-2 upper-toolbar-group" role="group" aria-label="Saving and sharing">
          <button name="load" type="button" class="btn btn-secondary" title="Load from file" disabled="true">📁</button>
          <button name="save" type="button" class="btn btn-secondary" title="Save to file" disabled="true">💾</button>
          <button name="link" type="button" class="btn btn-secondary" title="Get link" disabled="true">🔗</button>
        </div>
      </div>
    </div>
    <div class="grid">
      <div class="editor-circuit-wrapper">
        <div id="editor-tab" class="tab-wrapper editor-tab active">
          <nav>
            <div class="nav nav-tabs" role="tablist">
              <a href="#start" class="nav-item nav-link active" role="tab" data-toggle="tab" aria-controls="start"
                aria-selected="true">Setup</a>
              <a href="#iopanel" class="nav-item nav-link" role="tab" data-toggle="tab" aria-controls="start"
                aria-selected="true">I/O</a>
            </div>
          </nav>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane tab-padded active" id="start">
              <h1 class="text-primary">DigitalJS Online</h1>
              <p>This is a demonstration app for the
                <a href="https://github.com/tilk/digitaljs">DigitalJS</a> digital logic simulator and the
                <a href="https://github.com/tilk/yosys2digitaljs">yosys2digitaljs</a> netlist format converter,
                by <a href="http://www.tilk.eu/">Marek Materzok</a>,
                <a href="http://www.ii.uni.wroc.pl/">University of Wrocław</a>.
                The source files <a href="https://github.com/tilk/digitaljs_online">are on Github</a>.
                Contributions are welcome!
                This was made possible by the
                <a href="http://www.clifford.at/yosys/">Yosys</a> open-source hardware synthesis framework.
              </p>
              <p>Create a new tab and enter your SystemVerilog code, or load an example by using the dropdown menu,
                and press the Synthesize button to start the simulation.</p>
              <div class="form-group">
                <div class="form-inline">

                  <input type="text" name="newtabname" placeholder="file name" pattern="[a-zA-Z0-9_-]*" spellcheck="false" autocapitalize="false" autocomplete="false"
                    defaultValue="input" class="form-control mr-1">

                  <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle mr-1" type="button" id="exten" data-extension="sv"
                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      .sv
                    </button>
                    <div class="dropdown-menu" aria-labelledby="excode" id="extens">
                      <a class="dropdown-item" href="#" data-extension="sv">.sv (SystemVerilog, Yosys native)</a>
                      <a class="dropdown-item" href="#" data-extension="v">.v (Verilog, Yosys native)</a>
                      <a class="dropdown-item" href="#" data-extension="vh">.vh (Verilog hex file)</a>
                      <a class="dropdown-item" href="#" data-extension="lua">.lua (Lua script)</a>
                    </div>
                  </div>

                  <button class="btn btn-primary" type="button" id="newtab">Create file</button>
                </div>
              </div>

              <div id="dropzone">Drop your files here or click for a file dialog</div>

              <div class="form-group">
                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="excode" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Load example code
                  </button>
                  <div class="dropdown-menu" aria-labelledby="excode" id="excodes">
                  </div>
                </div>
              </div>
              <form>
                <div class="form-group">
                  <label for="files">Additional SystemVerilog files:</label>
                  <input type="file" class="form-control-file" id="files" multiple="true">
                </div>
                <div class="form-group form-check" data-bs-toggle="tooltip"
                  title="Enables Yosys optimizations of the synthesized circuit. This might make the circuit differ significantly to its HDL specification. This corresponds to the 'opt -full' Yosys command.">
                  <input type="checkbox" id="opt" class="form-check-input">
                  <label for="opt" class="form-check-label">Optimize in Yosys</label>
                </div>
                <div class="form-group form-check" data-bs-toggle="tooltip"
                  title="Enables post-processing of Yosys output to reduce the number of components and improve readability.">
                  <input type="checkbox" id="transform" class="form-check-input" checked>
                  <label for="transform" class="form-check-label">Simplify diagram</label>
                </div>
                <div class="form-group form-check" data-bs-toggle="tooltip"
                  title="Enables checking for common problems using the Verilator compiler.">
                  <input type="checkbox" id="lint" class="form-check-input" checked>
                  <label for="lint" class="form-check-label">Lint source code using <a
                      href="https://verilator.org/">Verilator</a></label>
                </div>
                <div class="form-group" data-bs-toggle="tooltip"
                  title="Changes how the circuit elements are automatically positioned after synthesis.">
                  <label for="layout">Layout engine</label>
                  <select id="layout" class="form-control">
                    <option value="elkjs">ElkJS (more readable)</option>
                    <option value="dagre">Dagre (legacy)</option>
                  </select>
                </div>
                <div class="form-group" data-bs-toggle="tooltip"
                  title="Changes how the synthesized circuit is simulated. The synchronous engine is well tested, but it's also very slow.">
                  <label for="engine">Simulation engine</label>
                  <select id="engine" class="form-control">
                    <option value="worker">WebWorker (faster and responsive)</option>
                    <option value="synch">Synchronous (extensible but slow)</option>
                  </select>
                </div>
                <div class="form-group" data-bs-toggle="tooltip"
                  title="Enables finite state machine processing in Yosys. This corresponds to the 'fsm' and 'fsm -nomap' Yosys commands.">
                  <label for="fsm">FSM transform (experimental)</label>
                  <select id="fsm" class="form-control">
                    <option value="">No FSM transform</option>
                    <option value="yes">FSM transform</option>
                    <option value="nomap">FSM as circuit element</option>
                  </select>
                </div>
                <div class="form-group form-check" data-bs-toggle="tooltip"
                  title="This corresponds to the 'fsm_expand' Yosys command.">
                  <input type="checkbox" id="fsmexpand" class="form-check-input">
                  <label for="fsmexpand" class="form-check-label">Merge more logic into FSM</label>
                </div>
              </form>
            </div>
            <div role="tabpanel" class="tab-pane tab-padded" id="iopanel">
            </div>
          </div>
        </div>
        <div id="gutter_horiz" class="gutter gutter-horizontal"></div>
        <div class="tab-wrapper circuit-tab">
          <div class="btn-group zoom-buttons-wrapper">
            <button class="btn btn-secondary" name="zoom-out">–</button>
            <button class="btn btn-secondary" name="zoom-in">+</button>
          </div>
          <div id="paper">
          </div>
        </div>
      </div>

      <div id="gutter_vert" class="gutter gutter-vertical"></div>

      <div id="monitorbox">
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar">
          <div class="symbola btn-group mr-2" role="group" aria-label="Scale control">
            <button name="ppt_up" type="button" class="btn btn-secondary" title="Increase pixels per tick"
              disabled="true">+</button>
            <button name="ppt_down" type="button" class="btn btn-secondary" title="Decrease pixels per tick"
              disabled="true">-</button>
          </div>
          <div class="input-group mr-2">
            <div class="input-group-prepend">
              <span class="input-group-text" title="Ticks per grid line">scale</span>
            </div>
            <input type="text" class="form-control" disabled="disabled" name="scale" />
          </div>
          <div class="symbola btn-group mr-2" role="group" aria-label="Time control">
            <button name="live" type="button" class="btn btn-secondary" title="Live mode" disabled="true">▶</button>
            <button name="left" type="button" class="btn btn-secondary" title="Move left" disabled="true">←</button>
            <button name="right" type="button" class="btn btn-secondary" title="Move right" disabled="true">→</button>
          </div>
          <div class="input-group mr-2">
            <div class="input-group-prepend">
              <span class="input-group-text" title="Display range">range</span>
            </div>
            <input type="text" class="form-control" disabled="disabled" name="rangel" />
            <div class="input-group-prepend input-group-append">
              <span class="input-group-text">–</span>
            </div>
            <input type="text" class="form-control" disabled="disabled" name="rangeh" />
          </div>
        </div>
        <div id="monitor">
        </div>
      </div>
    </div>
  </div>

  <div id="tab-buttons-wrapper">
    <button class="tab-btn editor-tab active">
      <strong style="font-size: 1.2em">&lt;/&gt;</strong><br>
      <span style="line-height: 90%">Code</span>
    </button>
    <button class="tab-btn circuit-tab">
      <img inline src="./circuit-icon.svg" alt=""><br>
      Circuit
    </button>
  </div>

</body>

</html>